<template>
  <view class="content-analyse">
    <view class="header">
      <view class="header-top">
        <view class="header-left"> {{ t("common.siteEarnings") }} </view>
        <view class="header-time">
          <up-subsection
            @change="timeChange"
            activeColor="#fff"
            inactiveColor="#999999"
            bgColor="#08121E"
            :list="list"
            :key="subsectionKey"
          ></up-subsection>
        </view>
      </view>
      <view class="bottom">
        <up-row :align="'top'">
          <up-col span="6">
            <view class="description">
              {{ t("common.totalRevenue") }}:
              {{ formatMoney(props.earningsStatisticsData.totalProfit).value }}
              {{
                t(
                  formatMoney(props.earningsStatisticsData.totalProfit).templete
                )
              }}
            </view>
          </up-col>
          <up-col span="6">
            <view class="description description-right">
              {{
                dateType == 0
                  ? t("common.today")
                  : dateType == 1
                  ? t("common.month")
                  : dateType == 2
                  ? t("common.year")
                  : ""
              }}{{ t("common.earnings") }}:
              {{ formatMoney(props.earningsStatisticsData.typeProfit).value }}
              {{
                t(formatMoney(props.earningsStatisticsData.typeProfit).templete)
              }}
              <!-- {{ props.earningsStatisticsData.typeProfit }}
              {{ t("common.10_000Yuan") }} -->
            </view>
          </up-col>
        </up-row>
      </view>
    </view>

    <template v-if="Object.keys(chartOption).length !== 0">
      <EChartsWrapper :option="chartOption" />
    </template>
    <template v-else>
      <up-empty icon="/static/no-empty.png" :text="t('common.empty')">
      </up-empty>
    </template>
  </view>
</template>

<script setup>
import { ref, defineExpose, watch } from "vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
import { formatMoney } from "@/utils/utils";
const list = ref([t("common.day"), t("common.monthToo"), t("common.yearToo")]);
const props = defineProps({
  earningsStatisticsData: {
    type: Object,
    detail: {},
  },
  earningsStatisticschartOption: {
    type: Object,
    detail: {},
  },
});
const dateType = ref(0);
// 添加一个 key 变量
const subsectionKey = ref(0);
// 模拟 v-show 状态改变时更新 key
const showComponent = ref(false);
const toggleShow = () => {
  if (!showComponent.value) {
    showComponent.value = true;
    // 更新 key 以强制重新渲染组件
    subsectionKey.value++;
  }
};

// 定义图表配置项
const chartOption = ref(props.earningsStatisticschartOption);
watch(
  () => props.earningsStatisticschartOption,
  (val) => {
    chartOption.value = val;
    toggleShow();
  }
);

const emit = defineEmits(["setDateType"]);
const handleDateType = () => {
  return dateType.value + 1;
};
defineExpose({
  handleDateType,
});
const timeChange = (e) => {
  dateType.value = e;
  emit("setDateType");
};
</script>

<style lang="scss" scoped>
.content-analyse {
  width: 100%;
  border-radius: 16rpx;
  background: #132034;
  padding: 32rpx 10rpx;
  box-sizing: border-box;

  .header {
    padding: 0rpx 39rpx;
    box-sizing: border-box;
    width: 100%;

    .header-top {
      width: 100%;
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .header-left {
        font-family: PingFangSC;
        font-size: 32rpx;
        font-weight: normal;
        color: #eeeeee;
      }

      .header-time {
        width: 50%;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        :deep(.u-subsection) {
          width: 270rpx;
        }

        :deep(.u-subsection--button__bar) {
          width: 90rpx !important;
          background: #64b7f6;
        }
      }
    }

    .bottom {
      margin-top: 28rpx;
      width: 100%;

      .description {
        font-family: Alibaba PuHuiTi 3;
        font-size: 28rpx;
        font-weight: normal;
        font-variation-settings: "opsz" auto;
        color: #dddddd;
      }

      .description-right {
        text-align: right;
      }
    }

    .header::after {
      content: "";
      position: absolute;
      left: -49rpx;
      top: 50%;
      transform: translateY(-50%);
      width: 8rpx;
      height: 32rpx;
      border-radius: 0px 8rpx 8rpx 0rpx;
      opacity: 1;
      background: #64b7f6;
    }
  }
}
</style>
